/*
  点击按钮 触发tap点击事件 调用小程序内置的 选择图片的api
  获取到 图片路径 数组
  把路径存入到data中
  页面循环渲染

  点击自定义图片组件
  获取被惦记的元素的索引 获取数组
  根据索引删除数组的元素，更新data数据

  点击提交 获取文本域的内容 对内容进行验证
  验证通过 图片上传到专门的服务器 返回图片外网的链接
  文本域和外网的图片路径一起提交到服务器 前端的模拟 不会发送到后台
  清空当前页面的内容 返回上一页
*/
Page({
  data: {
    tabs: [
      {
        id: 0,
        value: '体验问题',
        isActive: true
      }, {
        id: 1,
        value: '商品、商家投诉',
        isActive: false
      }
    ],
    // 被选中的图片路径数组
    imgList: []
  },
   // 标题的点击事件
   handleTabsItemChange(e) {
    const { index } = e.detail
    // 这里必须重新拿到tabs的数据，因为小程序的数据绑定需要用到this.setData
    let { tabs } = this.data
    tabs.forEach((v, i) => i===index ? v.isActive = true : v.isActive = false)
    this.setData({
      tabs
    })
  },
  //点击按钮选择图片 
  handleBtnChoose() {
    wx.chooseImage({
      // 同时选中的图片数量
      count: 9,
      // 原图 压缩
      sizeType: ['original','compressed'],
      // 相册 照相机
      sourceType: ['album','camera'],
      success: (result)=>{
        this.setData({
          // 图片偏数组 进行拼接
          imgList: [...this.data.imgList, ...result.tempFilePaths]
        })
      }
    });
  },
  // 点击图片删除
  handleRemoveImg(e) {
    // 获取索引
    const {index} = e.currentTarget.dataset
    // 获取data数组
    let {imgList} = this.data
    imgList.splice(index, 1)
    this.setData({
      imgList
    })
  }
})